<template>
  <view class="login">
    <view class="login-logo">
      <image mode="widthFix" src="/static/logo.png" />
    </view>
    <view class="login-content">
      <input
        v-model="username"
        type="text"
        maxlength="11"
        placeholder="请输入用户名"
      />
      <input
        v-model="password"
        type="password"
        maxlength="11"
        placeholder="请输入密码"
      />
    </view>
    <view class="login-btn">
      <button class="submit">submit</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const username = ref('')
const password = ref('')
</script>

<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;

  &-logo {
    width: 250 * 2rpx;
    margin: 0 auto;
    padding: var(--vt-c-padding-20) 0;
    overflow: hidden;
    border-radius: var(--vt-c-radius);

    image {
      width: 100%;
    }
  }

  &-content {
    width: 70%;
    margin: var(--vt-c-padding-20) auto 0;

    input {
      height: 30 * 2rpx;
      line-height: 30 * 2rpx;
      color: var(--color-heading);
      border-bottom: 1px solid var(--color-border);
      font-size: var(--vt-c-size-16);

      &:last-child {
        margin-top: var(--vt-c-padding-20);
      }
    }
  }

  &-btn {
    margin-top: 10vh;

    .submit {
      width: 45%;
      margin: 0 auto;
      background-color: var(--vt-c-primary-btn);
      color: var(--vt-c-color-white);
    }
  }
}
</style>
